<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>百度一下，你就知道</title>

    <!-- Bootstrap core CSS -->
    <link href="../res/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="../res/css/navbar-fixed-top.css" rel="stylesheet">
    <link rel="stylesheet" href="../res/css/common.css">
    <link rel="stylesheet" href="../res/plugins/toastr/css/toastr.css">
    <link rel="stylesheet" href="../res/plugins/toastr/css/toast.custom.css">
    <link rel="stylesheet" href="../res/plugins/bootbox/css/bootbox-custom.css">
    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]>

    <![endif]-->


    <link rel="stylesheet" href="../res/plugins/select2/css/select2.css">
    <link rel="stylesheet" href="../res/css/themes/blue.css">
    <link rel="stylesheet" href="../res/plugins/Validform/css/Validform.css">
    <link rel="stylesheet" href="../res/plugins/toastr/css/toastr.css">
    <link rel="stylesheet" href="../res/plugins/toastr/css/toast.custom.css">
    <link rel="stylesheet" href="../res/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="../res/plugins/bootstrap-fileinput/css/fileinput.css">
    <style>
		.form-group label.required{
			color:red;
		}
		
		#uploadGamePicArea{
			display:none;
		}

    </style>

</head>

<body>

<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li class="dropdown-header">Nav header</li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="../navbar/">Default</a></li>
                <li><a href="../navbar-static-top/">Static top</a></li>
                <li class="active"><a href="../res">Fixed top <span class="sr-only">(current)</span></a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>

<div class="container-fluid">

    <ol class="breadcrumb">
        <li><a href="#">主页</a></li>
        <li><a href="#">游戏管理</a></li>
        <li class="active">上传图片</li>
    </ol>

    <div class="panel panel-info">
        <div class="panel-heading" style="padding: 6px 15px;">
            <div class="row">
                <div class="col-xs-6" style="line-height: 30px;">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 上传图片
                </div>
            </div>
        </div>
        <div class="panel-body">

			<div class="form-wrap" style="padding:10px 0px;border:1px solid #ccc;">

                <form id="addUserForm" class="form-horizontal">
                    <div class="form-group">
                        <label for="account" class="col-sm-3 control-label">账号</label>
                        <div class="col-sm-5">
                            <input id="account" name="account" type="text" class="form-control" placeholder="请输入账号"  datatype="s6-18" nullmsg="请输入账号！" errormsg="昵称至少6个字符,最多18个字符！"/>
                        </div>
                        <div class="col-sm-4"></div>
                    </div> 
                    
                    <div class="form-group">
                        <label for="face" class="col-sm-3 control-label">文件</label>
                        <div class="col-sm-5">
                            <a id="addGamePicBtn" href="javascript:void(0);" class="btn btn-success">+</a>
                        </div>
                        <div class="col-sm-4"></div>
                    </div>
                    
                    <div id="uploadGamePicArea" class="form-group">
                        <label for="face" class="col-sm-1 control-label"></label>
                        <div class="col-sm-10">
                            <input id="filePic" class="file-loading" type="file" multiple />
                        </div>
                    </div>
                    






                    <div class="form-group">
                        <div class="col-sm-offset-3 col-sm-9">
                            <button type="submit" class="btn btn-success btn-submit"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 保存</button>
                            <button type="submit" class="btn btn-default"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 取消</button>
                        </div>
                    </div>
                </form>

            </div>


        </div>
    </div>


</div> <!-- /container -->


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../res/plugins/jquery/jquery-2.2.0.min.js"></script>
<script src="../res/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../res/plugins/bootstrap/js/ie10-viewport-bug-workaround.js"></script>
<script src="../res/plugins/select2/js/select2.full.js"></script>
<script src="../res/plugins/Validform/js/Validform_v5.3.2_min.js"></script>
<script src="../res/plugins/Validform/js/Validform_Datatype.js"></script>
<script src="../res/plugins/jquery-formToObject/jquery.formToObject.js"></script>
<script src="../res/js/user/addUser.js"></script>
<script src="../res/plugins/toastr/js/toastr.js"></script>
<script src="../res/plugins/bootbox/js/bootbox.js"></script>
<script src="../res/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script src="../res/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="../res/plugins/bootstrap-fileinput/js/fileinput.js"></script>
<script src="../res/plugins/bootstrap-fileinput/js/fileinput_locale_zh.js"></script>

<script>
	$("#uploadGamePicArea").show();
	$("#addGamePicBtn").click(function(){
		$("#uploadGamePicArea").show();
		console.log("bbb:"+$("#uploadGamePicArea").attr("data-state"));
		var state = $("#uploadGamePicArea").attr("data-state");
		if(state!=1){
			alert("重新加载...");
			initUpload();
		}
	});
	
	initUpload();
	console.log("init:"+$("#uploadGamePicArea").attr("data-state"));
	
	
	function initUpload(){
		$("#uploadGamePicArea").attr("data-state",1);
		$("#filePic").fileinput({
			language: 'zh',
		    uploadUrl: '${pageContext.request.contextPath}/upload/batchUploadImage', // you must set a valid URL here else you will get an error
		    overwriteInitial: false,
		    maxFileSize: 1000,
		    maxFilesNum: 2,
		    indicatorNewTitle : "",
		    allowedFileExtensions : ['jpg', 'png','gif'],
		    //allowedFileTypes: ['image', 'video', 'flash'],
		    uploadAsync: false, // 是否允许上传多个文件
		    slugCallback: function(filename) {
		        return filename.replace('(', '_').replace(']', '_');
		    }
		});

		/**单文件上传成功的事件**/
		$('#filePic').on('fileuploaded', function(event, data, previewId, index) {
		    var form = data.form, files = data.files, extra = data.extra,
		        response = data.response, reader = data.reader;
		    console.log('fileuploaded triggered');
		    console.log(data);
		    console.log(previewId);
		    console.log(index);
			$('#filePic').fileinput('destroy');
			//$('#filePic').fileinput('clear').fileinput('cancel').fileinput('enable');
		    $("#uploadGamePicArea").hide(500);
		    $("#uploadGamePicArea").attr("data-state",0);
		    console.log("aaa"+$("#uploadGamePicArea").attr("data-state"));
		});
		
		/**批量上传成功的回调事件**/
		$('#filePic').on('filebatchuploadsuccess', function(event, data, previewId, index) {
		    var form = data.form, files = data.files, extra = data.extra,
		        response = data.response, reader = data.reader;
		    console.log('File batch upload success');
		    console.log(data);
		    console.log(previewId);
		    console.log(index);
		    
		    $('#filePic').fileinput('destroy');
		    $("#uploadGamePicArea").hide(500);
		    $("#uploadGamePicArea").attr("data-state",0);
		    console.log("aaa"+$("#uploadGamePicArea").attr("data-state"));
		});
	}
	
</script>

</body>
</html>
    